import React from 'react';
import './address.less';
// import Clear from '../../component/Button/clearBtn.js'
import API from "asha/libs/api.js"

class Address extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Address';
        this.state = {
            prov:[],
            city:[],
            dist:[],
            provID:"",
            cityID:"",
            distID:"",
            value:"",
            size:100
        }
    }
    //切换地址
    handleChange(a,v){
        if(a=="provID"){//省份选择
            //在prov中查找当前选择地址
            this.state.prov.forEach((p)=>{
                if(p.id==v){
                    this.setState({
                        value:p.value,
                        provID:v
                    })
                    this.giveAddrValue(p.value)
                }
            })
            //获取下一级数据
            API.callJson("/address/search")({
                size:this.state.size,
                parent_id:v
            }).then((data)=>{
                this.setState({
                    city:data.content,
                })
            }).catch((msg)=>{
                console.log(msg)
            })
        }else if(a=="cityID"){//城市选择
            //在city中查找当前选择地址
            this.state.city.forEach((c)=>{
                if(c.id==v){
                    this.setState({
                        value:c.value,
                        cityID:v
                    })
                    this.giveAddrValue(c.value)
                }
            })
            //获取下一级数据
            API.callJson("/address/search")({
                size:this.state.size,
                parent_id:v
            }).then((data)=>{
                this.setState({
                    dist:data.content,
                })
            }).catch((msg)=>{
                console.log(msg)
            })
        }else if(a=="distID"){//区县选择
            //在dist中查找当前选择地址
            this.state.dist.forEach((d)=>{
                if(d.id==v){
                    this.setState({
                        value:d.value,
                        distID:v
                    })
                    this.giveAddrValue(d.value)
                }
            })
        }
    }
    // 设置地址回调函数
    giveAddrValue(a){
        if(this.props.onChange){
            this.props.onChange(a)
        }
    }
    // 清空地址
    handleClear(){
        if(this.props.onChange){
            this.props.onChange("")
        }
    }
    // 初始化
    componentDidMount(){
        var values = this.props.value.split("|")
        this.setState({
            value:this.props.value,
            provID:values[0]||"省",
            cityID:values[1]||"市",
            distID:values[2]||"区/县"
        })
        API.callJson("/address/search")({
            size:this.state.size,
            parent_id:100000
        }).then((data)=>{
            this.setState({
                prov:data.content,
            })
        }).catch((msg)=>{
            console.log(msg)
        })
    }
    // 用新的props:addr更新组件
    componentWillReceiveProps(nextProps){
        var values = nextProps.value.split("|")
        this.setState({
            value:nextProps.value,
            provID:values[0]||"省",
            cityID:values[1]||"市",
            distID:values[2]||"区/县"
        })
    }
    render() {
        return <div className="tederen-address">
            <ASelect data={this.state.prov} num={1}
            value={this.state.provID}
            onChange={this.handleChange.bind(this,"provID")}
            height={this.props.height}
            />
            <ASelect data={this.state.city} num={2}
            value={this.state.cityID}
            onChange={this.handleChange.bind(this,"cityID")}
            height={this.props.height}
            />
            <ASelect data={this.state.dist} num={3}
            value={this.state.distID}
            onChange={this.handleChange.bind(this,"distID")}
            height={this.props.height}
            />
            {/*this.props.clear?<Clear onClick={this.handleClear.bind(this)} btnValue="清除地址"/>:null*/}
        </div>
    }
}
//单条select
class ASelect extends React.Component {
    constructor(props){
        super(props)
        this.state={}
    }
    // 回调传地址对应id
    changeAddress(e){
        this.props.onChange(parseInt(e.target.value))
    }
    //备注: option中的value不能为对象，换成id即可
    render() {
        var value = this.props.value
        return <div
                className={"tederen-ASelect aselect"+this.props.num}
                style={value=="省"||value=="市"||value=="区/县"?{color:"#999"}:{color:"#444"}}
                >
            <select
            onChange={this.changeAddress.bind(this)}
            style={{height:this.props.height}}
            value={value}
            >
                {isNaN(value)?<option>{value}</option>:null}
                {
                    this.props.data.map((option,i)=>{
                        return <option key={i} value={option.id}>{option.name}</option>
                    })
                }
            </select>
        </div>
    }
}
//Address组件默认参数
Address.defaultProps={
    clear: false,
    height: 38,
    value: "省|市|区/县"
}
export default Address
